import { bookUserDelete, bookUserList } from "@/services/userProfile";
import { Avatar, Button, Empty, Icon, Input, List, Modal, Pagination, Skeleton, Spin, message } from "antd";
import React from "react";
import AuthorizationAddModal from '@/pages/Account/authManage/authorizationAddModal';
import AuthorizationAddModal4App from '@/pages/Account/authManage/authorizationAddModal4App';
import tableDataCheck from "@/utils/isBackPrevPage";
import { getUserAuthList, getAppUserAuthList, removeUserAuth, removeAppUserAuth } from "@/services/user";
import styles from "./index.less"
import { formatMessage } from 'umi-plugin-react/locale';

class AuthUserList extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      current:1,
      size:10,
      total:0,
      loading:false,
      list:[],
      search:"",
      queryData: {
        current: 1,
        size: 10,
        search: "",
        source: 1,
        targetId: '',
      },
      isEmpty:false
    }
  }

  componentDidMount(){
    if(this.props.onRef){
      this.props.onRef(this)
    }
  }

  getList = () => {
    this.setState({
      loading:true
    },async () => {
      const { current, size, search } = this.state;
      const { accountType, targetId, authType, pageSource } = this.props;
      let obj = {
        current,
        size,
        search,
        targetId,
        source:0
      }
      let res;
      if (accountType === 'APP') {
        res = await getAppUserAuthList(obj)
      } else {
        if(pageSource == 'document'){
          obj.source = 2
          obj.authType = authType
        }
        if(pageSource == 'application'){
          obj.source = 1
          obj.userType = 2
        }
        res = await getUserAuthList(obj)
      }
      this.setState({
        list:res.records,
        total:res.total,
        loading:false,
        isEmpty:res.total == 0,
        queryData:obj
      })
    })
  }

  doSearch = (current,size) => {
    this.setState({
      current,
      size
    },() => {
      this.getList()
    })
  }

  openAddModal = () => {
    if (this.props.accountType === 'APP') {
      this.AuthorizationAddModal4App.initData()
    } else {
      this.AuthorizationAddModal.initData()
    }
  }

  deleteUser = async id => {
    const { accountType, pageSource } = this.props;
    const that = this;
    Modal.confirm({
      title: formatMessage({ id: 'utils.commonComponent.authUserList.confirmDelete' }),
      okText: formatMessage({ id: 'utils.commonComponent.authUserList.confirm' }),
      okType: 'danger',
      cancelText: formatMessage({ id: 'utils.commonComponent.authUserList.cancel' }),
      onOk: async () => {
        let res;
        if (accountType === 'APP') {
          res = await removeAppUserAuth({ id })
        } else {
          res = await removeUserAuth({id,source:pageSource == 'document' ? 2 : pageSource == 'application' ? 1 : 0})
        }
        message.info(res.message)
        const { list,current,size } = that.state;
        const newCurrent = tableDataCheck(list, current)
        that.doSearch(newCurrent,size)
      },
      onCancel() { },
    })
  }

  doSearchByDocument = search => {
    const { size } = this.state;
    this.setState({
      search
    },() => {
      this.doSearch(1,size)
    })
  }

  render(){
    const { current,size,list,total,loading,search,queryData,isEmpty } = this.state;
    const { accountType, targetId, pageSource, authType} = this.props;
    const userType = (type) => {
      let text = "";
      switch (type) {
        case 0:
          text = formatMessage({ id: 'utils.commonComponent.authUserList.selfBuiltUser' });
          break;
        case 1:
          text = formatMessage({ id: 'utils.commonComponent.authUserList.appUser' });
          break;
        case 2:
          text = formatMessage({ id: 'utils.commonComponent.authUserList.addressBookUser' });
          break;
      };
      return text;
    }
    return (
      <div>
        <div className="topOptionBox" style={{ margin: '15px 0' }}>
          <div className="topOptionBox-left">
            { accountType === 'SP' && pageSource == 'document' ? (
              <div style={{fontSize:12,color:"#1f2329"}}>页面默认权限：{authType == 0 ? '可管理' : authType == 1 ? '可编辑' : '可查看'}</div>
            ) : (
              <Input.Search
                value={search}
                onChange={e => this.setState({search:e.target.value})}
                onSearch={() => this.doSearch(1,size)}
                  placeholder={formatMessage({ id: 'utils.commonComponent.authUserList.searchMember' })}
                style={{width:240}}
              />
              )}
          </div>
          <div className="topOptionBox-right">
            <Button type="primary" ghost icon="plus" onClick={() => this.openAddModal()} style={{height:28}}>{formatMessage({ id: 'utils.commonComponent.authUserList.addMember' })}</Button>
          </div>
        </div>
        <Skeleton avatar title={false} loading={loading} active>
          <div className={styles.listBox}>
            { isEmpty ? <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /> : '' }
            {
              list.map(item => {
                return (
                  <div className={styles.listItem} key={item.id}>
                    <div className={styles.itemAvatar}>
                      { accountType === 'APP' || item.type == 1 ? <Avatar src="../../../newUI/auth-user.svg" /> : <svg width="32" height="32" viewBox="0 0 32 32" fill="none"><rect width="32" height="32" rx="16" fill="#4954E6"></rect><path d="M12.2 18.5h7.6c.16-.1.34-.18.53-.24v-1.1a.67.67 0 00-.66-.66h-7.34a.67.67 0 00-.66.67v1.1c.19.05.37.13.53.23zm-1.87-.24v-1.1a2 2 0 012-2h3v-1.41a2.67 2.67 0 111.34 0v1.42h3a2 2 0 012 2v1.1a2.33 2.33 0 11-1.87.23h-7.6a2.33 2.33 0 11-1.87-.24zM16 12.5a1.33 1.33 0 100-2.67 1.33 1.33 0 000 2.67zm5 9a1 1 0 100-2 1 1 0 000 2zm-10 0a1 1 0 100-2 1 1 0 000 2z" fill="#fff"></path></svg>}
                    </div>
                    <div className={styles.itemMain}>
                      {
                        accountType === 'APP'
                          ? (
                            <div className={styles.itemContent}>
                              <div className={styles.itemTitle}>{item.username}</div>
                            </div>
                          ) : (
                            <div className={styles.itemContent}>
                              <div className={styles.itemTitle}>{item.name ? item.name : item.deptName}</div>
                              { item.name && item.deptName && <div className={styles.itemDesc}>{item.deptName}</div> }
                            </div>
                          )
                      }
                      <div className={styles.itemExtraBoxAppUser}>
                        {
                          accountType === 'APP'
                            ? <span>{item.applicationName}</span>
                            : (pageSource === 'role' && <span>{userType(item.userType)}</span>)
                        }
                        <div style={{ width: '56px' }}>
                          <button className={styles.itemIcon} onClick={() => this.deleteUser(item.id)}><svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" data-icon="CloseOutlined"><path d="M20.778 20.778a1 1 0 0 0 0-1.414L13.414 12l7.364-7.364a1 1 0 0 0-1.414-1.414L12 10.586 4.636 3.222a1 1 0 0 0-1.414 1.414L10.586 12l-7.364 7.364a1 1 0 1 0 1.414 1.414L12 13.414l7.364 7.364a1 1 0 0 0 1.414 0Z" fill="currentColor"></path></svg></button>
                        </div>
                      </div>
                    </div>
                  </div>
                )
              })
            }
          </div>
        </Skeleton>

        {parseInt(total) > 10 ? (<Pagination
          total={total}
          current={current}
          onChange={this.doSearch}
          showQuickJumper={true}
          style={{ marginTop: 20, textAlign: 'center' }}
        />):''}

        <AuthorizationAddModal
          onRef={ref => this.AuthorizationAddModal = ref}
          authId={''}
          getList={() => this.doSearch(1,size)}
          pageSource={pageSource}
          targetId={targetId}
          queryAuthData={queryData}
        />
        <AuthorizationAddModal4App
          onRef={ref => this.AuthorizationAddModal4App = ref}
          getList={() => this.doSearch(1,size)}
          targetId={targetId}
        />
      </div>
    )
  }
}

export default AuthUserList
